<template>
   <el-breadcrumb separator="/" class="bread">
    <el-breadcrumb-item v-for="(item, index) in breadData" :key="index">
      <template v-if="index != breadData.length - 1">
        <router-link :to="{ path: item.path }">{{
          item.meta.title
        }}</router-link>
      </template>
      <template v-else>{{ item.meta.title }}</template>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
    name:'myBreadcrumb',
   data:function(){
       return {
           breadData:[]
       }
   },
   mounted () {
       this.getBreadData()
   },
   methods: {
       getBreadData(){
           console.log(this.$route);
           let breadData=this.$route.matched
           if(breadData[1].path=='/home'){
               breadData=[{path:'/home',meta:{title:'首页'}}]
           }else{
               breadData=[{path:'/home',meta:{title:'首页'}}].concat(breadData)
           }
           this.breadData=breadData
       }
   },
   watch: {
       $route(){
           this.getBreadData()
       }
   }

}
</script>

<style>
.bread{
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
}

</style>